<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one
  ~ or more contributor license agreements.  See the NOTICE file
  ~ distributed with this work for additional information
  ~ regarding copyright ownership.  The ASF licenses this file
  ~ to you under the Apache License, Version 2.0 (the
  ~ "License"); you may not use this file except in compliance
  ~ with the License.  You may obtain a copy of the License at
  ~
  ~   http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing,
  ~ software distributed under the License is distributed on an
  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  ~ KIND, either express or implied.  See the License for the
  ~ specific language governing permissions and limitations
  ~ under the License.
  -->

<nz-layout style="margin: -24px -24px 16px;">
  <nz-layout class="inner-layout">
    <div id="environmentOuter">
      <nz-breadcrumb>
        <nz-breadcrumb-item>
          <!--<a [routerLink]="['/', 'workbench', 'home']">Home</a>-->
          <a>Home</a>
        </nz-breadcrumb-item>
        <nz-breadcrumb-item>
          <a [routerLink]="['/', 'workbench', 'environment']">environment</a>
        </nz-breadcrumb-item>
      </nz-breadcrumb>
      <div>
        <br />
        <h2>Environment</h2>
        <nz-content>
          Environment profiles defines a set of libraries and when Docker is being used, a Docker image in order to run
          an experiment or a notebook.
        </nz-content>
      </div>
      <br />
    </div>
  </nz-layout>
  <div id="environmentData">
    <div>
      <div align="right">
        <nz-input-group
          nzSearch
          style="width: 300px; margin-top: 15px; margin-left: 10px; margin-right: 5px;"
          [nzAddOnAfter]="suffixIconButton"
        >
          <input type="text" nz-input placeholder="input search text" />
        </nz-input-group>
        <ng-template #suffixIconButton>
          <button nz-button nzType="primary" nzSearch><i nz-icon nzType="search"></i></button>
        </ng-template>

        <button
          nz-button
          id="createEnvironment"
          nzType="primary"
          style="margin-right: 5px; margin-bottom: 15px; margin-top: 15px;"
          (click)="initEnvForm()"
        >
          <i nz-icon nzType="plus"></i>
          New Environment
        </button>
        <button
          nz-button
          id="deleteEnvironment"
          nzType="primary"
          style="margin-bottom: 15px; margin-top: 15px;"
          nz-popconfirm
          nzTitle="Confirm to delete?"
          nzCancelText="Cancel"
          nzOkText="Ok"
          (nzOnConfirm)="deleteEnvironments()"
        >
          <i nz-icon nzType="delete" nzTheme="outline"></i>
          Delete
        </button>
      </div>
      <nz-table id="releaseTable" nzBordered #basicTable [nzData]="environmentList" [nzNoResult]="'No data'">
        <thead>
          <tr>
            <th>
              <label nz-checkbox [(ngModel)]="selectAllChecked" (ngModelChange)="selectAllEnv()"></label>
            </th>
            <th>Environment Name</th>
            <th>Docker image</th>
            <th>Kernel name</th>
            <th>Kernel channel</th>
            <th>Kernel dependencies</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let data of basicTable.data; let i = index">
            <td>
              <label *ngIf="data.environmentSpec.name != 'notebook-env'" nz-checkbox [(ngModel)]="checkedList[i]"></label>
            </td>
            <td>{{ data.environmentSpec.name }}</td>
            <td>{{ data.environmentSpec.dockerImage }}</td>
            <td>{{ data.environmentSpec.kernelSpec.name }}</td>
            <td>
              <dl *ngFor="let channel of data.environmentSpec.kernelSpec.channels">
                <dt>{{ channel }}</dt>
              </dl>
            </td>
            <td>
              <dl *ngFor="let dependency of data.environmentSpec.kernelSpec.dependencies">
                <dt>{{ dependency }}</dt>
              </dl>
            </td>
          </tr>
        </tbody>
      </nz-table>
    </div>
    <router-outlet></router-outlet>
  </div>
</nz-layout>

<nz-modal [(nzVisible)]="isVisible" nzTitle="Create Environment" [nzWidth]="700" (nzOnCancel)="isVisible = false">
  <form nz-form [formGroup]="environmentForm" nzLayout="horizontal">
    <div *nzModalFooter>
      <button nz-button nzType="default" (click)="closeModal()">Cancel</button>
      <button id="go" nz-button nzType="primary" [disabled]="checkStatus()" (click)="createEnvironment()">Create</button>
    </div>
    <h2>Meta</h2>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="environmentName">
        Environment Name
      </nz-form-label>
      <div nz-col nzSpan="16">
        <nz-form-control nzErrorTip="Please input environment name!">
          <input
            required
            nz-input
            style="width: 80%;"
            type="text"
            name="environmentName"
            id="environmentName"
            formControlName="environmentName"
          />
        </nz-form-control>
      </div>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="dockerImage">
        Docker Image
      </nz-form-label>
      <div nz-col nzSpan="16">
        <nz-form-control nzErrorTip="Please input docker image!">
          <input 
            required 
            nz-input 
            style="width: 80%;"
            type="text" 
            name="dockerImage" 
            id="dockerImage" 
            formControlName="dockerImage" />
        </nz-form-control>
      </div>
    </nz-form-item>
    <h2>Kernel Spec</h2>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="name">
        Name
      </nz-form-label>
      <div nz-col nzSpan="16">
        <nz-form-control nzErrorTip="Please input name!">
          <input 
            required 
            nz-input 
            style="width: 80%;"
            type="text" 
            name="name" 
            id="name" 
            formControlName="name" />
        </nz-form-control>
      </div>
    </nz-form-item>
    <div formArrayName="channels">
      <div *ngFor="let channel of channels.controls; let i = index">
        <nz-form-item>
          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="channel">
            Channel {{ i + 1 }}
          </nz-form-label>
          <div nz-col nzSpan="16">
            <nz-form-control nzErrorTip="Please input channel!">
              <input 
                required 
                nz-input 
                style="width: 80%;" 
                type="text" 
                name="channel{{ i }}" 
                id="channel{{ i }}" 
                [formControlName]="i" />
              <i
                nz-icon
                style="margin-left: 5px;"
                nzType="close-circle"
                nzTheme="fill"
                (click)="deleteItem(channels, i)"
              ></i>
            </nz-form-control>
          </div>
        </nz-form-item>
      </div>
    </div>
    <div style="margin: 10px;">
      <button
        nz-button
        style="display: block; margin: auto;"
        id="addChannel-btn"
        type="default"
        (click)="addChannel()"
      >
        New Channel
      </button>
    </div>
    <div formArrayName="dependencies">
      <div *ngFor="let channel of dependencies.controls; let i = index">
        <nz-form-item>
          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="dependency">
            Dependency {{ i + 1 }}
          </nz-form-label>
          <div nz-col nzSpan="16">
            <nz-form-control nzErrorTip="Please input dependency!">
              <input
                required
                nz-input
                style="width: 80%;"
                type="text"
                name="dependencies{{ i }}"
                id="dependencies{{ i }}"
                [formControlName]="i"
              />
              <i
                nz-icon
                style="margin-left: 5px;"
                nzType="close-circle"
                nzTheme="fill"
                (click)="deleteItem(dependencies, i)"
              ></i>
            </nz-form-control>
          </div>
        </nz-form-item>
      </div>
    </div>
    <div style="margin: 10px;">
      <button
        style="margin-top: 10px;"
        nz-button
        style="display: block; margin: auto;"
        id="addDep-btn"
        type="default"
        (click)="addDependencies()"
      >
        New Dependency
      </button>
    </div>
  </form>
</nz-modal>
